<template>
  <view class="info">
    <image
      class="avatar"
      src="http://127.0.0.1:3000/static/logo.png"
      mode="aspectFill"
    />
    <view class="info-box" @click="handleClick">
      <view class="nickname">快乐星球</view>
      <view class="other-info">
        <view class="ball-level">
          <text class="iconfont icon-lv-2" style="font-size: 32rpx"></text>
          <text>2级</text>
        </view>
        <view class="sex">
          <text class="iconfont icon-nv" style="font-size: 32rpx"></text>
          <text>女</text>
        </view>
      </view>
    </view>
  </view>
  <view class="list-box">
    <button open-type="share" plain class="list-item">
      <view class="list-item-title">
        <view class="iconfont icon-lv-10"></view>
        <view class="list-item-text">分享快乐</view>
      </view>
      <view class="iconfont icon-lv-10"></view>
    </button>
    <button open-type="feedback" plain class="list-item">
      <view class="list-item-title">
        <view class="iconfont icon-lv-10"></view>
        <view class="list-item-text">意见反馈</view>
      </view>
      <view class="iconfont icon-lv-10"></view>
    </button>
  </view>
</template>
<script lang="ts" setup>
const handleClick = () => {
  const openid = uni.getStorageSync("openid");
  if (openid) {
    uni.navigateTo({
      url: "/pages/person/index",
    });
  } else {
    uni.navigateTo({
      url: "/pages/empower/index",
    });
  }
};
</script>
<style scoped>
.info {
  display: flex;
  height: 240rpx;
  background: #ffa500;
  align-items: center;
  padding: 32rpx;
}
.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.info-box {
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nickname {
  font-size: 40rpx;
  margin: 16rpx 0;
}
.other-info {
  display: flex;
}
.ball-level {
  margin-right: 16rpx;
  font-size: 28rpx;
}
.ball-level text {
  padding: 0 8rpx;
}
.sex {
  margin-left: 16rpx;
  font-size: 28rpx;
}
.sex text {
  padding: 0 8rpx;
}
.list-box {
  width: 700rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  margin: 32rpx auto;
}
.list-item {
  display: flex;
  align-items: center;
  height: 80rpx;
  background-color: transparent;
  border: 2rpx solid #f5f5f5;
  border-radius: 0 !important;
}
.list-item-title {
  flex: 1;
  display: flex;
  align-items: center;
}
.list-item-text {
  margin-left: 16rpx;
  font-size: 28rpx;
}
</style>
